<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>组件：每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="app07" class="demo">
      <button-counter2></button-counter2>
      <button-counter2></button-counter2>
      <button-counter2></button-counter2>
  </div>

  <script>

    var buttonCounter2Data = {
      count: 0
    }

    Vue.component('button-counter2',{
       data:function () {
         // data是一个函数，组件之间不相互影响
         return {
           count:0
         }
       },
       /*data:function () {
         // data是一个对象，会影响到其它实例
         return buttonCounter2Data

       },*/
       template:'<button v-on:click="count++">点击了 {{ count }} 次</button>',

     })

     // 创建实例
     new Vue({
       el:'#app07'
     })
  </script>
</body>
</html>
